<html>
<head>
<style type="text/css">
body { margin: 0px; }
.hover_group:hover {
	border-color: red;
}
.area:hover {
	cursor: crosshair;
}
#a11:hover {
	cursor: crosshair;
}

</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="svg.js"></script>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript">

function getStyle(player) {
	if (!player) return "fill: red";

	return "fill: "+ player.color;
}
function buildMap(map) {
	var g = document.createElementNS (SVG, "g");
	g.className = "map";

	for (var i = 0; i < map.regions.length; ++i) {
		var region = map.regions[i];
		g.appendChild(buildRegion(map, region.id));
	}
	for (var i = 0; i < map.areas.length; ++i) {
		var area = map.areas[i];
		g.appendChild(buildArea(map, area.id));
	}
	for (var i = 0; i < map.links.length; ++i) {
		var link = map.links[i];
		g.appendChild(buildLink(map, link.id));
	}

	return g;
}
function buildRegion(map, id) {
	var g = document.createElementNS (SVG, "g");
	g.className = "region";

	var region = map.getRegionById(id);
	if (!region) return g;

	return g;
}
function buildArea(map, id) {
	var g = document.createElementNS (SVG, "g");

	var area = map.getAreaById(id);
	if (!area) return g;

	g.className = "area";
	g.onClick = "alert();";

	g.setAttributeNS(null, 'id', area.id);
	g.setAttributeNS(null, 'transform', "translate("+ area.x +" "+ area.y +")");

	var player = map.getPlayerById(area.owner);
	g.appendChild(buildPolygon(area.shape, getStyle(player)));
	if (typeof area.force === 'string')
		g.appendChild(buildText(0, "5", area.force, "text-anchor: middle"));

	return g;
}
function buildLink(map, id) {
	var g = document.createElementNS (SVG, "g");
	g.className = "link";

	var link = map.getLinkById(id);
	if (!link) return g;

	g.setAttributeNS(null, 'id', link.id);
//	g.setAttributeNS(null, 'transform', "translate("+ area.x +" "+ area.y +")");

	var start = map.getAreaById(link.start);
	var end   = map.getAreaById(link.end);
	g.appendChild(buildLine(start.x, start.y, end.x, end.y, "stroke: black"));

	return g;
}

var map = null;

function load() {
	if (true) {

		ajaxRequest("map.json", function(json) {
			map = json2map(json);
		});

		return;
	}

	map = new Map();

	map.addPlayer(new Player("p1", "Player 1", "#ffff00"));
	map.addPlayer(new Player("p2", "Player 2", "#ff00ff"));

	map.addLink(new Link("l1", "a11", "a12", 1));

	map.addArea(new Area("a11", "", "name",-120,-60, "img", "-10, -10, 10, -10, 10, 10, -10, 10", ["l1"], "p1", 0));
	map.addArea(new Area("a12", "", "name",-100,-60, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a13", "", "name", -80,-60, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a14", "", "name", -60,-60, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a15", "", "name",-110,-40, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a16", "", "name", -90,-40, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a17", "", "name", -70,-40, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a18", "", "name",-100,-20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a19", "", "name", -80,-20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a1a", "", "name", -90,  0, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));

	map.addArea(new Area("a21", "", "name",-10,-20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a22", "", "name", 10,-20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p2", 0));
	map.addArea(new Area("a23", "", "name",-20,  0, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a24", "", "name",  0,  0, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p2", 0));
	map.addArea(new Area("a25", "", "name", 20,  0, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a26", "", "name",-10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p2", 0));
	map.addArea(new Area("a27", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));

	map.addArea(new Area("a31", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a32", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a33", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a34", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a35", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a36", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a37", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a38", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a39", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a3a", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a3b", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));

	map.addArea(new Area("a41", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a42", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a43", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a44", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));

	map.addArea(new Area("a51", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a52", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a53", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a54", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a55", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));

	map.addArea(new Area("a61", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a62", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a63", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
	map.addArea(new Area("a64", "", "name", 10, 20, "img", "-10, -10, 10, -10, 10, 10, -10, 10", [], "p1", 0));
}

function draw() {
	if (!map) {
		setTimeout(function() { draw(); }, 50);
		return;
	}

	var svg = document.createElementNS (SVG, "svg");
	svg.setAttributeNS(null, 'id', "canvas");
	svg.setAttributeNS(null, 'transform', "translate(0 0) scale(1 1)");

	svg.setAttributeNS (null, 'width', 960); // 480
	svg.setAttributeNS (null, 'height', 640); // 320
	svg.setAttributeNS (null, 'viewBox', "-100 -100 200 200");

	svg.appendChild(buildRectangle(0, 0, 960, 640, "stroke: black"));
//	svg.appendChild(buildImage("map.png",-150,-100, 300, 200));
//	svg.appendChild(buildWorld());

	svg.appendChild(buildMap(map));

	document.body.appendChild(svg);
}

</script>
</head>

<body onload="load(); draw();">

</body>
</html>
